<template>
  <div class="container">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'cl-container',
  props: {
    fluid: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    className () {
      return this.fluid ? { 'container': true } : { 'container-fluid': true }
    }
  }

}
</script>

<style lang="scss" scoped>
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
    width: 750px;
  }
  @media (min-width: 992px) {
    width: 970px;
  }
  @media (min-width: 1200px) {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
</style>
